import { useEffect, useState } from "react";
import lessModule from "./index.module.less";
import { useLocation, useNavigate } from "react-router-dom";
import { Dropdown, Select, Space } from "antd";
import { ReactComponent as ArrowDown } from "../../../../../../assets/svg/arrowDown.svg";

// 主页-头部操作组件-tab组件
interface homePageHeaderOperationComponentTabComponentComponentInterface {
  tabList: Array<object>
  change_tabData: Function
}

const HomePage_HeaderOperationComponentTabComponent: React.FC<homePageHeaderOperationComponentTabComponentComponentInterface> = (props) => {
  const navigate = useNavigate()
  const location = useLocation()
  const [tabTitle, setTabTitle] = useState<string>(props.tabList?.[0]?.["title"])
  const [dropdownTitle, setDropdownTitle] = useState<string>("")
  const [dropdownNameSelectedIdxData, setDropdownNameSelectedIdxData] = useState<object>({})

  let [items, setItems] = useState<any>([]);

  const change_location = () => {
    const currentRouter = location.pathname.split("/")[3]
    const currentRouterList = props.tabList.filter((item) => item["router"] === currentRouter)

    if (currentRouterList.length) {

      const currentRouterData = currentRouterList[0]
      setDropdownTitle("")
      setTabTitle(currentRouterData["title"])
      props.change_tabData(currentRouterData)
    } else {
      props.tabList.forEach((item, idx) => {
        item["dropdownList"]?.forEach((item, idx) => {
          if (item["router"] === currentRouter) {
            dropdownNameSelectedIdxData[item["parentName"]] = idx
            setTabTitle("")
            setDropdownTitle(item["title"])
            setDropdownNameSelectedIdxData({ ...dropdownNameSelectedIdxData })
            props.change_tabData(item)
          }
        })
      })
    }
  }

  const click_tabItem = (data: object) => {
    tabTitle !== data['title'] && navigate(data["router"])

  }

  const change_openDropdown = (value: string, list: Array<object>) => {
    const selectedIdx = dropdownNameSelectedIdxData[value] ?? 0
    items = []
    list.forEach((item, idx) => {
      items.push({
        label: (
          <div className={lessModule["dropdownMenuItem"]}
            style={{ cursor: dropdownTitle === item["title"] && idx === selectedIdx ? "default" : "pointer", backgroundColor: dropdownTitle === item["title"] && idx === selectedIdx ? "#E6F7FF" : "#FFFFFF" }}
            onClick={() => !(dropdownTitle === item["title"] && idx === selectedIdx) && click_dropdownItem(value, idx, item)}
          >{item["title"]}</div>
        )
      })
    })
    setItems([...items])
  }

  const click_dropdownItem = (name: string, idx: number, data: object) => {

    navigate(data["router"])
  }

  useEffect(() => {
    change_location()
  }, [location,props.tabList])

  return (
    <div className={lessModule["homePageHeaderOperationComponentTabComponent"]}>
      {
        props.tabList.map((item: any, idx) => {
          return (
            <div key={`tabItem${idx}`} className={lessModule["homePageHeaderOperationComponentTabComponent-tabItem"]}
              style={{
                cursor: tabTitle === item['title'] ? "default" : "pointer",
                color: tabTitle === item['title'] || dropdownTitle === item["dropdownList"]?.[dropdownNameSelectedIdxData[item["dropdownName"] ?? 0]]?.["title"] ? "rgba(255, 255, 255, 0.9)" : "rgba(0, 0, 0, 0.6)",
                fontWeight: tabTitle === item['title'] || dropdownTitle === item["dropdownList"]?.[dropdownNameSelectedIdxData[item["dropdownName"] ?? 0]]?.["title"] ? 600 : 400,
                backgroundColor: tabTitle === item['title'] || dropdownTitle === item["dropdownList"]?.[dropdownNameSelectedIdxData[item["dropdownName"] ?? 0]]?.["title"] ? "#1890FF" : "#FFFFFF",
                borderRight: item["isBorderRight"] ? "1px solid #DCDCDC" : "none"
              }}
              onClick={() => !item["dropdownName"] && click_tabItem(item)}>
              <item.svg color={tabTitle === item["title"] || dropdownTitle === item["dropdownList"]?.[dropdownNameSelectedIdxData[item["dropdownName"] ?? 0]]?.["title"] ? "#FFFFFF" : "#000000"} />
              {
                !item["dropdownName"] && <span>{item["title"]}</span>
              }
              {
                item["dropdownName"] && <Dropdown placement="bottomCenter" trigger={['click']} menu={{ items }} onOpenChange={(open) => open && change_openDropdown(item["dropdownName"], item["dropdownList"])}>
                  <Space className={lessModule["homePageHeaderOperationComponentTabComponent-tabItem__dropdown"]}>
                    {
                      <span>{item["dropdownList"][dropdownNameSelectedIdxData[item["dropdownName"]] ?? 0]["title"]}</span>
                    }
                    <ArrowDown color={dropdownTitle === item["dropdownList"]?.[dropdownNameSelectedIdxData[item["dropdownName"] ?? 0]]?.["title"] ? "#FFFFFF" : "#000000"} />
                  </Space>
                </Dropdown>
              }
            </div>
          )
        })
      }
    </div>
  )
}



export default HomePage_HeaderOperationComponentTabComponent